<template>
  <div class="home-warp">
    <el-row type="flex" class justify="center">
      <el-col :span="17">
        <div class="home-content-warp">
          <el-row type="flex" class justify="space-between">
            <el-col :span="16">
              <div class="home-left-warp">
                <div class="carousel-warp">
                  <el-carousel :interval="4000" type="card" height="300px">
                    <el-carousel-item v-for="(item,index) in carouselList" :key="index">
                      <el-image
                        style="width: 100%; height: 100%"
                        :src="item.imgUrl"
                        fit="fill"
                        ></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div>
                  <el-input
                    style="width:300px;"
                    placeholder="请输入搜索的关键字"
                    v-model="searchValue">
                  </el-input>
                  <span style="padding-left:10px;"><el-button icon="el-icon-search" size="medium" circle @click="searchClick"></el-button></span>
                </div>
                <articleList :ListData="articleListData"></articleList>
                <div v-if="haveMoreDataBtn">
                  <div  v-if="isHaveArticleData" ><el-button class="more-data-btn" @click="moreArticleBtnClick" type="primary" :loading="isArticleLoading">{{isArticleLoading?"加载中":"点击加载更多"}}</el-button></div>
                  <div v-else><el-button class="have-no-data-info" disabled>已经没有了呀</el-button></div>
                </div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="home-right-warp">
                <sideBar>
                  <template v-slot:sideBarHeader>
                    <currentDateTime></currentDateTime>
                    
                    <el-divider></el-divider>
                  </template>
                  <template v-slot:sideBarMain>
                    <aplayer
                      v-if="musicIsReady"
                      theme="pic"
                      :music="currentMusic"
                      showLrc
                      :list="musicList"
                      listFolded
                    />
                    <el-divider></el-divider>
                    <div style="border-left: 5px solid skyblue; padding-left:20px">
                      <h3>热门博文</h3>
                    </div>
                    <hotArticleList :listData="hotArticleListData"></hotArticleList>
                  </template>
                </sideBar>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import articleList from "@/components/articleList";
import { request } from "@/network/request.js";
import sideBar from "@/components/sideBar";
import currentDateTime from "@/components/currentDateTime";
import hotArticleList from "@/components/homeComponents/hotArticleList";
import aplayer from 'vue-aplayer';
export default {
  name: "home",
  components: {
    articleList,
    sideBar,
    currentDateTime,
    hotArticleList,
    aplayer
  },
  data() {
    return {
      searchValue:"",
      articleListData: [],
      hotArticleListData:[],
      carouselList:[],
      isHaveArticleData:true,
      isArticleLoading:false,
      articleListIndex:0,
      haveMoreDataBtn:false,
      musicList:[
        
      ],
      musicIsReady:false,
      currentMusic:{}
    };
  },
  methods: {
    moreArticleBtnClick(){
      this.isArticleLoading=true;
      this.articleListIndex++;
      request({
        url:"/article/articleList/"+this.articleListIndex
      }).then(res=>{
        if(res.data.articleList.length>0){
          this.articleListData = this.articleListData.concat(res.data.articleList);
          this.isArticleLoading=false;
          this.isHaveArticleData=true;
        }else{
          this.isArticleLoading=false;
          this.isHaveArticleData=false;
        }
      }).catch(err=>{
        console.log(err);
        this.$message.error('获取数据失败，请稍后再试');
        this.isArticleLoading=false;
        this.isHaveArticleData=true;
        this.articleListIndex--;
      })
    },
    searchClick(){
      if(this.searchValue.trim()===""){
        this.$message.error('请输入要搜索的值才能搜索');
      }else{
        this.$router.push({
        name:"SearchResult",
        query:{
          keyword:this.searchValue
        }
      })
      }
    }
  },
  created() {
    
    //测试一下网络请求,请求首页第一页的文章列表数据
    request({
      url: "/article/articleList/"+0
    })
      .then(res => {
        // console.log(res);
        this.articleListData = res.data.articleList;
        if(res.data.articleList.length>=7){
          this.haveMoreDataBtn=true;
        }
        // console.log(typeof res.data.total);
        // console.log(this);
      })
      .catch(err => {
        console.log(err);
      });
      //取得热门博文数据
      request({
      url: "/article/hotArticleList"
    })
      .then(res => {
        this.hotArticleListData = res.data.hotArticleList;
      })
      .catch(err => {
        console.log(err);
      });
      request({
        url:"/staticResources/homeCarousel"
      }).then(res=>{
        console.log(res);
        this.carouselList=res.data.carouselList;
      }).catch(err=>{
        console.log(err);
      });
      request({
        url:"/staticResources/musicData"
      }).then(res=>{
        console.log(res);
        this.musicList=res.data.musicDataList;
        this.currentMusic=this.musicList[0];
        this.musicIsReady=true;
      }).catch(err=>{
        console.log(err);
      })
  }
};
</script>
<style>
.home-warp {
  margin: 20px 0;
  min-height: 800px;
}
.home-left-warp,
.home-right-warp {
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  min-height: 750px;
}
.more-data-btn,.have-no-data-info {
  width: 100%;
}
.carousel-warp {
  padding: 10px 0px;
}
.aplayer-warp {
  padding-bottom: 20px;
}
</style>
